<script setup>
// 订单信息列表
import { getPlanOrderAPI, getsampleManagementAPI } from '@/api/order/producManaga/producManaga.js'

//代理
const { proxy } = getCurrentInstance()

// 物料类别
const props = defineProps({
  //状态
  isShow: {
    type: Boolean,
    default: false
  },
  //标题
  title: {
    type: String,
    default: '物料'
  },
  // 是否单选
  bdb: {
    type: Boolean,
    default: false
  },
  //类型
  type: {
    type: String,
    default: '1'
  }
})

//事件抛出
const emit = defineEmits(['selectsubmit', 'preservation', 'cancel', 'reset'])

/**
 * 表格loading值
 */
const loading = ref(false)

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
  materialName: '', // 名称
  materialCode: '', // 编码
  planType: '' // 类别
})

/**
 * 表格数据
 */
const handleSelect = ref({ id: '' })
const tableData = ref([])
const total = ref(0)

// 列表枚举
const column = ref([
  { label: '订单号', prop: 'salesOrderNum' },
  { label: '产品编码', prop: 'materialCode' },
  { label: '产品名称', prop: 'materialName' },
  { label: '规格型号', prop: 'specType' },
  { label: '数量', prop: 'planWeight' },
  { label: '交货时间', prop: 'deliveryDate' },
  { label: '客户', prop: 'customerName' }
])

// 勾选数据
const handleSelectionChange = ({ ids, row }) => {
  handleSelect.value = row
}
// 是否禁用 保存
const d = computed(() => {
  if (props.bdb) {
    return handleSelect.value?.id ? false : true
  } else {
    return handleSelect.value.length > 0 ? false : true
  }
})

// 提交
const preservation = () => {
  if (props.bdb) {
    const Obj = handleSelect.value
    emit('preservation', Obj)
  } else {
    emit('preservation', {
      list: handleSelect.value
    })
  }
}

// 重置
const reset = () => {
  for (let key in query) {
    query[key] = ''
  }
  initData()
}

// 初始化
const initData = () => {
  tableData.value = []
  handleSelect.value = {}
  props.type == '1' ? getPlanOrder() : getsampleManagement()
}

// 查询1
const getPlanOrder = async () => {
  loading.value = true
  try {
    const res = await getPlanOrderAPI(query)
    total.value = res.total
    tableData.value = res.rows
  } catch (error) {
  } finally {
    loading.value = false
  }
}

// 查询2
const getsampleManagement = async () => {
  loading.value = true
  try {
    const res = await getsampleManagementAPI(query)
    total.value = res.total
    tableData.value = res.rows
  } catch (error) {
  } finally {
    loading.value = false
  }
}

watch(
  () => props.type,
  val => {
    if (val) {
      console.log(val, 'val')
      query.planType = props.type
      initData()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<template>
  <!-- 查询条件 -->
  <p-dialog :isBtn="false" v-model="props.isShow" title="订单信息" @close="emit('cancel')" width="50%">
    <el-form :inline="true" label-width="100px">
      <el-form-item :label="`${props.title}编码`">
        <el-input clearable v-model.trim="query.materialCode" :placeholder="`请输入${props.title || '物料'}编码`" />
      </el-form-item>
      <el-form-item :label="`${props.title}名称`">
        <el-input clearable v-model.trim="query.materialName" :placeholder="`请输入${props.title || '物料'}名称`" />
      </el-form-item>
      <el-form-item label="销售单号">
        <el-input clearable v-model.trim="query.salesOrderNum" placeholder="请输入销售单号" />
      </el-form-item>
    </el-form>

    <el-divider />
    <p-table
      keyId="id"
      :isRadio="props.bdb"
      :isSel="!props.bdb"
      :column="column"
      :total="total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="initData"
      stripe
      border
      :loading="loading"
      :data="tableData"
      highlight-current-row
      @change="handleSelectionChange"
    >
      <template #columnCell="{ column, record }"> </template>
    </p-table>

    <!-- 按钮 -->
    <div>
      <el-row class="Btn">
        <el-button type="primary" @click="initData">查询列表</el-button>
        <el-button type="info" @click="reset">重置</el-button>
        <el-button type="success" @click="preservation" :disabled="d">保存</el-button>
        <el-button type="info" @click="emit('cancel')">取消</el-button>
      </el-row>
    </div>
  </p-dialog>
</template>

<style scoped lang="scss">
.Btn {
  margin-top: 10px;
  float: right;
}
</style>
